<template>
	<view class="container">
		<!-- 城市列表 -->
		<view>
			<view class="search">
				<view class="bg flex align-center">
					<input class="search-input" v-model="searchX" placeholder-style="color: #D6D6D6;" placeholder="请输入选手名称或编号" type="text" value="" />
					<view class="search-btn flex align-center justify-center" @click="searchCity1">
						<text class="wlIcon-search"></text>
					</view>
				</view>
			</view>
			<scroll-view class="scroll-view" scroll-y scroll-with-animation="true" enable-back-to-top="true" :scroll-into-view="toIndex" @scroll="scrollHandle">
				<view class="">
					<!-- 热门城市 -->
					<view class="area list-item" id="hot">
						<view class="title-wrapp">
							<view class="title">
								<text class="l">热门赛区</text>
							</view>
						</view>
						<view class="ul" v-if="hotcites.length">
							<view class="li" hover-class="hover" v-for="(item, index) in hotcites" :key="index" @click="selectCity(item)">{{ item.cityName }}</view>
						</view>
					</view>
				</view>
				<view class="title-box">所有城市赛区</view>
				<!-- 城市列表  -->
				<view class="city-list">
					<view class="list list-item" v-for="(item, key) of cities" :key="key" :id="key">
						<!-- <view class="title">{{ key }}</view> -->
						<view class="item borderBottom" hover-class="hover" v-for="innerItem in item" :key="innerItem.cityId" @click="selectCity(innerItem)">
							{{ innerItem.city }}
						</view>
					</view>
				</view>
			</scroll-view>

			<!-- 字母列表 -->
			<view class="alphabet" @touchstart="touchStart" @touchend="touchEnd" @touchmove.stop="touchMove">
				<view v-for="(item, index) in alphabet" :key="index" @touchstart="getLetter" @touchend="setLetter" :id="item">
					<view class="item" :class="{ active: currentLetter == item }">
						{{ item == 'hot' ? '热门' : item }}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import City from '@/static/city.json';
export default {
	props: ['setProvince', 'searchCity'],
	data() {
		return {
			isIPX: null,
			regionId: null, //区域ID
			isToggle: true,
			isReach: false,
			inputValue: '',
			searchData: [], //搜索的数据
			isClearBtn: false,
			searchX: '',
			regionList: City.data.area, //区域列表,模拟数据请自行修改
			cityId: null, //城市ID
			cityName: null, //城市名
			areaName: '东城区', //区域名,模拟数据请自行修改

			hotcites: [], //热门城市，模拟数据请自行修改
			cities: [], //城市列表,拟数据请自行修改

			alphabet: City.data.alphabet, //字母列表
			toIndex: '', //跳转的索引的字母
			tipsLetter: '', //滑动显示字母
			timer: null,
			hasNoData: false,
			searchFocus: false,
			letterDetails: [],
			currentLetter: 'area' //默认选择hot
		};
	},
	watch: {
		// 城市搜索输入框
		inputValue(newVal) {
			this.isClearBtn = newVal ? true : false;

			if (this.timer) {
				clearTimeout(this.timer);
			}

			if (!this.inputValue) {
				this.searchData = [];
				return;
			}
			this.timer = setTimeout(() => {
				const result = [];
				for (let i in this.cities) {
					this.cities[i].forEach((item) => {
						if (item.spell.includes(this.inputValue) || item.city.includes(this.inputValue)) {
							result.push(item);
						}
					});
				}
				this.searchData = result;
				if (this.searchData.length === 0) {
					this.hasNoData = true;
				} else {
					this.hasNoData = false;
				}
			}, 500);
		},
		isReach(val) {
			this.searchFocus = val;
		}
	},
	async created() {
		//真实数据请求...
		let [err1, res1] = await uni.request({
			url: `/wanlshop/activity/Index/cityList`,
			method: 'GET'
		});
		let [err, res] = await uni.request({
			url: '/wanlshop/activity/Index/getArea',
			method: 'GET'
		});
		console.log(err);
		this.hotcites = [
			{
				cityName: '总赛区'
			},
			...res1.data.map((item) => {
				return {
					cityName: item.province
				};
			})
		];
		this.cities = res.data.cities;
	},
	methods: {
		//列表滚动，和右边字母表对应
		scrollHandle(e) {
			let view = uni.createSelectorQuery().in(this).selectAll('.list-item');
			view.boundingClientRect((d) => {
				let top = d[0].top;
				d.forEach((item) => {
					item.top = item.top - top;
					item.bottom = item.bottom - top;
					this.letterDetails.push({
						id: item.id,
						top: item.top,
						bottom: item.bottom
					});
				});
			}).exec();

			const scrollTop = e.detail.scrollTop;
			this.letterDetails.some((item) => {
				if (scrollTop >= item.top && scrollTop <= item.bottom - 20) {
					this.currentLetter = item.id;
					//当前固定用的是粘性定位，如果不用粘性定位，在这里设置
					return true;
				}
			});
		},

		//搜索
		searchChange(e) {
			let { value } = e.detail;
			this.inputValue = value;
		},

		//搜索结果列表数据
		citySearchList(item) {
			console.log('选择的城市：', item);
		},

		selectCity(item) {
			this.$emit('setProvince', item.cityName || item.city);
		},
		searchCity1(item) {
			this.$emit('searchCity', this.searchX);
		},
		//区域选择
		selectRegion(item) {
			console.log('选择的区域是：', item);
		},

		//触发开始
		touchStart(e) {
			// console.log(e);
		},
		//移动时
		touchMove(e) {
			uni.vibrateShort();
			let y = e.touches[0].clientY;
			let offsettop = e.currentTarget.offsetTop;

			//判断选择区域,只在选择区才会生效
			if (y > offsettop) {
				let num = parseInt((y - offsettop) / 15); //右边每个字母元素的高度
				let letter = this.alphabet[num];
				this.tipsLetter = letter;

				let curentLetter = this.letterTransform(letter);
				uni.showToast({
					title: curentLetter,
					icon: 'none',
					duration: 1000
				});
			}
		},
		//触发结束
		touchEnd() {
			this.toIndex = this.tipsLetter;
		},
		//移动开始获取字母，并放大提示
		getLetter(e) {
			uni.vibrateShort();
			let { id } = e.currentTarget;
			this.tipsLetter = id;

			let curentLetter = this.letterTransform(id);
			uni.showToast({
				title: curentLetter,
				icon: 'none',
				duration: 1000
			});
		},
		//移动结束设置字母，赋值到toIndex
		setLetter() {
			this.toIndex = this.tipsLetter;
		},

		//提示字母转换
		letterTransform(letter) {
			let str = '';
			if (letter == 'area') {
				str = '区县';
			} else if (letter == 'hot') {
				str = '热门';
			} else {
				str = letter;
			}

			return str;
		}
	}
};
</script>

<style lang="scss" scoped>
.borderBottom {
	position: relative;

	&::after {
		content: '';
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 1px;
		background: #c1c2cd;
		transform: scaleY(0.5);
	}
}
.title-box {
	font-size: 30rpx;
	font-weight: 900;
	letter-spacing: 1.5rpx;
	line-height: 42rpx;
	color: #3d3d3d;
}
.city-search-wrap {
	width: 100%;
	padding: 0 30rpx;
	box-sizing: border-box;

	.search {
		width: 100%;
		height: 60rpx;
		display: flex;
		align-items: center;
		font-size: 24rpx;
		color: #222;
		padding: 0 30rpx;
		box-sizing: border-box;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 1;
		background: #fff;

		.l-search {
			flex: 1;
			background: #f4f5f9;
			border-radius: 50rpx;
			position: relative;

			.icon-search {
				font-size: 26rpx;
				position: absolute;
				left: 30rpx;
				top: 50%;
				transform: translateY(-50%);
				color: #8e8f97;
				font-weight: 700;
			}

			.input-search {
				height: 60rpx;
				box-sizing: border-box;
				padding: 0 100rpx 0 100rpx;
				text-align: center;
			}

			.clear-input {
				font-size: 30rpx;
				position: absolute;
				right: 10rpx;
				top: 50%;
				transform: translateY(-50%);
				padding: 10rpx;
				color: #8e8f97;
			}
		}

		.r-cancel {
			margin-left: 28rpx;
			padding-right: 30rpx;
			padding: 0;
			font-size: 30rpx;
			background: transparent;
		}
	}
}

.reach-content {
	padding-top: 60rpx;

	.li {
		font-size: 32rpx;
		color: #333;
		padding: 20rpx 0;
		position: relative;
	}
}

.block {
	padding: 0 30rpx;
	box-sizing: border-box;
}

.borderBottom {
	position: relative;

	&::after {
		content: '';
		position: absolute;
		left: 0;
		bottom: 0;
		width: calc(100% - 50rpx);
		height: 1px;
		background: #c1c2cd;
		transform: scaleY(0.5);
	}
}
.search {
	margin: 20rpx auto;
	width: 700rpx;
	height: 88rpx;
	border-radius: 10rpx;
	padding: 4rpx;
	// background: linear-gradient(90deg, rgba(170, 40, 248, 1) 0%, rgba(96, 69, 251, 1) 100%);
	.bg {
		position: relative;
		border-radius: 10rpx;
		// background-color: $bg1;
		width: 100%;
		height: 100%;
		border: 1px solid #eaeaea;
	}
	.search-input {
		background-color: #fff;
		flex: 1;
		height: 100%;
		padding: 20rpx;
		padding-right: 88rpx;
		font-size: 28rpx;
		font-weight: 500;
		letter-spacing: 1.4rpx;
		line-height: 39.2rpx;
	}
	.search-btn {
		position: absolute;
		right: -4rpx;
		color: #fff;
		font-size: 40rpx;
		border-radius: 0 10rpx 10rpx 0;
		width: 74rpx;
		height: 80rpx;
		background: linear-gradient(270deg, #fd77e3 0%, #ec5bff 100%);
	}
}

.scroll-view {
	width: 100%;
	height: calc(100vh - 80rpx);
	box-sizing: border-box;
}

.area {
	padding-bottom: 40rpx;

	.title-wrapp {
		position: sticky;
		top: 0;
		left: 0;
	}

	.title {
		width: 100%;
		box-sizing: border-box;
		font-size: 40rpx;
		font-weight: 500;
		font-size: 30rpx;
		font-weight: 900;
		letter-spacing: 1.5rpx;
		line-height: 42rpx;
		color: #3d3d3d;

		.r {
			font-size: 24rpx;
			color: #8e8f97;
			display: inline-block;
			align-items: center;

			.iconfont {
				font-size: 24rpx;
			}
		}
	}

	.ul {
		display: flex;
		flex-wrap: wrap;

		.li {
			width: 202rpx;
			padding: 0 10rpx;
			box-sizing: border-box;
			height: 70rpx;
			line-height: 70rpx;
			text-align: center;
			font-size: 28rpx;
			font-weight: 500;
			letter-spacing: 1.4rpx;
			color: #3d3d3d;
			border-radius: 10rpx;
			margin: 20rpx 20rpx 0 0;
			border: 2rpx solid rgba(216, 216, 216, 0.26);

			&.active {
				font-weight: 400;
				border: 1px solid #f66ef1;
			}
		}

		.hover {
			border: 1px solid #f66ef1;
		}
	}
}

.city-list {
	width: 677rpx;
	padding-bottom: 50rpx;

	.title {
		height: 60rpx;
		line-height: 60rpx;
		font-size: 30rpx;
		font-weight: 500;
		color: #272636;
		background: #f4f5f9;
		margin-bottom: 20rpx;
		position: sticky;
		top: 0;
		left: 0;
		z-index: 2;
	}

	.item {
		padding: 24rpx 0 24rpx 0rpx;
		color: #3d3d3d;
		font-size: 28rpx;
		font-weight: 500;
		letter-spacing: 1.4rpx;

		&::after {
			// left: 30rpx;
			width: calc(100% - 30rpx);
			background: #efefef;
		}
	}

	.hover {
		background: #ffde45;

		&::after {
			background: #ffde45;
		}
	}
}

.alphabet {
	position: fixed;
	right: 0;
	bottom: 1%;
	width: calc(750rpx - 680rpx);
	text-align: center;
	font-size: 20rpx;
	font-weight: 700;
	color: #8e8f97;

	.item {
		height: 15px;
		line-height: 15px;
	}

	.active {
		color: #ffde45;
	}
}

.has-no-data {
	font-size: 24rpx;
	text-align: center;
	color: #8e8f97;
	margin-top: 50rpx;
}
</style>
